<template>
  <div class="caixin">
    <van-row>
      <van-col class="first-title">订阅号</van-col>
    </van-row>

    <div class="row gap-10px" style="justify-content: space-between;flex-wrap: nowrap;">
      <div class="col sub-list-item shadow" v-for="(item,index) in subs" :key="'sg'+index">
        <van-image
          round
          fit="cover"
          width="50"
          height="50"
          :src="item.url"/>

        <span>{{ item.name }}</span>
      </div>
    </div>

    <van-divider/>

    <div class="list-item" style="font-size: 14px;" v-for="(item,n) in list" :key="'sg'+n">
      <div class="row" style="align-items: center;">
        <div class="col">
          <van-image
            round
            width="30"
            height="30"
            :src="item.avatar"
          />
        </div>
        <div class="col" style="flex: 1;margin-left: 10px;font-size: 16px;">{{ item.author }}</div>
        <div class="col">
          <div class="row follow-btn">
            <van-icon name="plus" style="margin-top: 3px;"/>
            <span>关注</span>
          </div>
        </div>
      </div>

      <div class="row" style="height: 80px;">
        <div class="col" v-show="item.url">
          <van-image width="100" height="80" fit="contain" :src="item.url"/>
        </div>

        <div class="col" style="flex:1;margin-left: 10px;justify-content: space-around">
          <div class="van-multi-ellipsis--l2" style="font-size: 16px;">{{ item.title }}</div>
          <div class="row" style="align-items: center;justify-content: space-between">
            <span style="color: #d7d7d7">{{ item.date }}</span>
            <span style="color: red;">{{ item.note }}</span>
          </div>
        </div>
      </div>

      <van-divider/>
    </div>

    <div class="horizontal-news">
      <div class="row" style="justify-content: space-between">
        <div class="van-ellipsis" style="flex:1;font-size: 16px;">
          扎根基层献真心，他的文化人生真......
        </div>
        <div style="color: #A7A7A7;margin-left:10px;font-size: 14px;">更多内容</div>
      </div>

      <div class="scroll gap-10px">
        <div v-for="n in 4" :key="'sg'+n" style="margin-right: 10px; width: 90%;position:relative;">
          <van-image
            fit="fill"
            src="http://sgrmtwx.shouguang.gov.cn/api-files/20201117/16/1605602461753/1605602461753.jpg"
          />

          <div style="width: 10240px;"></div>

          <div class="row" style="align-items: center;padding: 10px;">
            <van-image
              round
              width="30"
              height="30"
              src="http://sgrmtwx.shouguang.gov.cn/api-files/20200306/09/1583458507900/1583458507900.png"/>

            <div style="flex:1;margin-left: 10px;">市文旅局</div>

            <div class="row follow-btn">
              <van-icon name="plus" style="margin-top: 3px;"/>
              <span>关注</span>
            </div>
          </div>

          <div class="title-flow">
            您好！文化站长丨扎根基层献真心，他的文化人生真精彩！
          </div>
        </div>
      </div>
    </div>

    <van-divider/>

    <div class="recommend-follow">
      <div class="row header" style="justify-content: space-between;">
        <span class="first-title">推荐关注</span>
        <div class="row" style="color: #969495;align-items: center">
          更多
          <van-icon name="arrow"/>
        </div>
      </div>

      <div class="scroll">
        <div class="col follow-item" v-for="(item,index) in subs2" :key="index">
          <van-image
            round
            width="60"
            height="60"
            :src="item.url"/>

          <span style="padding:10px;font-size:15px;">{{ item.name }}</span>

          <div class="row follow-btn">
            <van-icon name="plus" style="margin-top: 3px;"/>
            <span>关注</span>
          </div>
        </div>
      </div>
    </div>

    <van-divider/>

    <div class="list-item" style="font-size: 14px;" v-for="(item,n) in list" :key="n">
      <div class="row" style="align-items: center;">
        <div class="col">
          <van-image
            round
            width="30"
            height="30"
            :src="item.avatar"
          />
        </div>
        <div class="col" style="flex: 1;margin-left: 10px;font-size: 16px;">{{ item.author }}</div>
        <div class="col">
          <div class="row follow-btn">
            <van-icon name="plus" style="margin-top: 1px;"/>
            <span>关注</span>
          </div>
        </div>
      </div>

      <div class="row gap-10px" style="height: 60px;">
        <div class="col" v-show="item.url">
          <van-image width="100" height="60" fit="contain" :src="item.url"/>
        </div>

        <div class="col" style="flex:1;margin-left: 10px;justify-content: space-between">
          <div class="van-multi-ellipsis--l2" style="font-size: 16px;">{{ item.title }}</div>
          <div class="row" style="align-items: center;justify-content: space-between">
            <span style="color: #d7d7d7">{{ item.date }}</span>
            <span style="color: red;">{{ item.note }}</span>
          </div>
        </div>
      </div>

      <van-divider/>
    </div>

  </div>
</template>

<script>

export default {
  name: 'CaiXin',
  components: {},
  data() {
    return {
      subs: [
        {
          url: require('@/assets/dyh_zjq.png'),
          name: '镇街区',
        },
        {
          url: require('@/assets/dyh_bm.png'),
          name: '部门',
        },
        {
          url: require('@/assets/dyh_qy.png'),
          name: '企业',
        },
        {
          url: require('@/assets/dyh_mj.png'),
          name: '名家号',
        },
      ],
      subs2: [
        {
          url: require('@/assets/hhxx.png'),
          name: '好好学习',
        },
        {
          url: require('@/assets/wddx.png'),
          name: '我的大学',
        },
        {
          url: require('@/assets/myjt.png'),
          name: '名医讲堂',
        },
        {
          url: require('@/assets/mxms.png'),
          name: '名校名师',
        },
      ],
      list: [
        {
          author: '市金融局',
          avatar: 'http://sgrmtwx.shouguang.gov.cn/api-files/20191209/20/1575893279742/1575893279742.jpeg',
          title: '玉马遮阳首发上市经深交所创业板 上市委员会审议会议通过',
          url: 'http://sgrmtwx.shouguang.gov.cn/api-files/20201119/08/1605746044557/1605746044557.jpg',
          date: '11-09 08:34',
          note: '推荐',
        },
        {
          author: '市统计局',
          avatar: 'http://sgrmtwx.shouguang.gov.cn/api-files/20200311/16/1583916639217/1583916639217.jpg',
          title: '关于设立寿光市润通医药有限公司古城街道寿济路诊所的公示',
          url: '',
          date: '11-18 10:34',
          note: '推荐',
        },
      ],
    }
  },
}
</script>

<style lang="scss" scoped>
.caixin {
  $gap10px: 10px;
  background-color: white;
  padding: $gap10px;
  margin-bottom: 50px;

  .sub-list-item {
    align-items: center;
    flex: 1;
    padding-top: $gap10px/2;
    margin-right: 10px;
    background-color: white;
    color: #959394;

    &:last-child {
      margin-right: 0;
    }

    van-image {
      margin-bottom: $gap10px/2;
    }
  }

  .sub-list-item span {
    font-size: 14px;
    margin: 5px 0;
  }

  .shadow {
    position: relative;
    max-width: 270px;
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3);
  }

  .shadow::before,
  .shadow::after {
    content: "";
    position: absolute;
    z-index: -1;
  }

  .shadow::before,
  .shadow::after {
    content: "";
    position: absolute;
    z-index: -1;
    bottom: 15px;
    left: 10px;
    width: 50%;
    height: 20%;
  }

  .shadow::before,
  .shadow::after {
    content: "";
    position: absolute;
    z-index: -1;
    bottom: 15px;
    left: 10px;
    width: 50%;
    height: 20%;
    box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
    transform: rotate(-3deg);
  }

  .shadow::after {
    right: 10px;
    left: auto;
    transform: rotate(3deg);
  }

  .gap-10px {
    margin-top: $gap10px;
  }

  .first-title {
    font-size: 18px;
  }

  .col {
    display: flex;
    flex-direction: column;
  }

  .row {
    display: flex;
    flex-direction: row;
  }

  .follow-btn {
    border: 1px solid #eee;
    font-size: 12px;
    padding: 3px 6px;
    border-radius: 5px;
  }

  .scroll {
    overflow-x: scroll;
    white-space: nowrap;
    overflow-y: hidden;
    display: flex;
    justify-content: space-between;
    -webkit-overflow-scrolling: touch;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .horizontal-news {
    & .title-flow {
      position: absolute;
      bottom: 60px;
      left: 0;
      right: 0;
      padding-left: $gap10px;
      color: white;
      font-size: 16px;
    }
  }

  .recommend-follow {

    & .header {
      margin-bottom: $gap10px;
    }

    & .follow-item {
      background-color: white;
      margin-right: $gap10px;
      padding: $gap10px*2 $gap10px $gap10px $gap10px;
      align-items: center;
    }

    .follow-btn {
      border: {
        color: #434343;
        radius: 0;
      }

    }
  }
}
</style>
